<template>
	<view class="privacy-wrap" :class="privacyStore.privacyModal.show ? 'show' : ''">
		<view class="content">
			<view class="title">隐私协议须知</view>
			<view class="tips">
				在使用本服务之前，请仔细阅读
				<text class="privacy-link" @click="handleReadPrivacy">
					{{ privacyContractName }}
				</text>
				。如果你同意{{ privacyContractName }}，请点击“同意”开始使用服务。
			</view>
			<view class="btns">
				<button class="btn cancel" @click="handleDisagreePrivacy">取消</button>
				<button :id="AGREE_ID" class="btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacy">同意</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import usePrivacyStore from '@/store/privacy.js';
import { ref } from 'vue';

// 同意按钮id
const AGREE_ID = 'agree-btn';
const privacyStore = usePrivacyStore();
const privacyContractName = ref('隐私保护协议');

// 初始化隐私协议
initPrivacyInfo();

async function initPrivacyInfo() {
	uni.getPrivacySetting &&
		uni.getPrivacySetting({
			success: (res) => {
				console.log('权限信息',res);
				if(res. privacyContractName === null){
					console.warn('👉小程序未有权限设置');
					return 
				}
				if (res.needAuthorization === false) {
					console.warn('👉小程序无需确认隐私');
				} else {
					console.warn('👉小程序需要确认隐私');
					return;
				}
				privacyContractName.value = res.privacyContractName;
			}
		});
}

/**
 * 阅读隐私协议
 */
function handleReadPrivacy() {
	uni.openPrivacyContract();
}

/**
 * 关闭弹窗
 */
function closeModal() {
	privacyStore.togglePrivacyModal(false);
}

/**
 * 拒绝隐私协议
 */
function handleDisagreePrivacy() {
	// console.log("handleDisagreePrivacy")
	closeModal();
	privacyStore.privacyModal.resolvePrivacyAuthorization({
		event: 'disagree'
	});
}

/**
 * 同意隐私协议
 */
function handleAgreePrivacy() {
	// console.log("handleAgreePrivacy")
	closeModal();
	privacyStore.privacyModal.resolvePrivacyAuthorization({
		buttonId: AGREE_ID,
		event: 'agree'
	});
}
</script>

<style lang="scss" scoped>
.privacy-wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 99;
	background: rgba(0, 0, 0, 0.2);
	display: none;
	&.show {
		display: block;
	}
}

.content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	width: 580rpx;
	padding: 40rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
}
.title {
	font-size: 36rpx;
	font-weight: 700;
	text-align: center;
}

.tips {
	margin-top: 32rpx;
	color: #333333;
	.privacy-link {
		color: #007cff;
	}
}

.btns {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60rpx;

	.btn {
		width: 240rpx;
		height: 72rpx;
		background: #007cff;
		text-align: center;
		line-height: 72rpx;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;

		&.cancel {
			color: #aaa;
			background: #f1f1f1;
		}

		&:not(:last-child) {
			margin-right: 40rpx;
		}
	}
}
</style>
